import * as React from 'react';
import * as moment from 'moment';
import { render } from '../../../renderers/factory';
import { fetch } from '../../../renderers/util';

//  class OrderForm extends React.Component {
//
//     form = null;
//
//     constructor(props) {
//         super(props);
//
//         this.state = {
//             volunteers: [],
//         };
//         this.removeVol = this.removeVol.bind(this);
//     }
//
//     componentDidMount() {
//         fetch(`/api/group`)
//             .then(ret => this.setState({
//                 ...ret.data,
//             }));
//     }
//
//     removeVol(groupId, volunteerId) {
//         fetch(`/api/group/${groupId}`, {volunteerId}, 'DELETE');
//     }
//
//
//     render() {
//         console.info(this.state);
//         return (
//             <div className="wrapper-md">
//                 {/*<div className="bg-white">*/}
//                     {
//                         render('page', {
//                             type: "page",
//                             title: "成员分组",
//                             // className: "b-l b-b b-r bg-white no-padder",
//                             body: {
//                                 type: "crud",
//                                 api: "/api/group",
//                                 primaryField: 'id',
//                                 className: "b-l b-b b-r bg-white no-padder",
//
//                                 columnsTogglable: false,
//                                 panelClassName: "no-border no-shadow bg-white",
//                                 footable: {
//                                     expand: "all"
//                                 },
//                                 toolbarInline: true,
//                                 toolbar: {
//                                     type: "button",
//                                     label: "添加分组",
//                                     level: "success",
//                                     size: 'sm',
//                                     actionType: "dialog",
//                                     dialog: {
//                                         title: "添加分组",
//                                         body: {
//                                             type: "form",
//                                             // api: 'post:/api/group',
//                                             controls: [
//                                                 {
//                                                     type: "text",
//                                                     name: "name",
//                                                     label: "分组名称",
//                                                     required: true,
//                                                     columnsCount: 4
//                                                 }
//                                             ]
//                                         }
//                                     }
//                                 },
//                                 // bulkActions: [
//                                 //     {
//                                 //         type: "button",
//                                 //         label: "删除分组",
//                                 //         level: "danger",
//                                 //         size: 'sm',
//                                 //         actionType: "ajax",
//                                 //         confirmText: "确定要删除？",
//                                 //         api: "delete:/api/group/${ids}"
//                                 //     }
//                                 // ],
//                                 columns: [
//                                     {
//                                         name: "id",
//                                         label: "分组ID",
//                                         innerClassName: "inline",
//                                     },
//                                     {
//                                         name: "name",
//                                         label: "分组名称",
//                                     },
//                                     {
//                                         name: "group_user_count",
//                                         label: "成员数",
//                                         width: 50
//                                     },
//                                     {
//                                         label: "操作",
//                                         type: "operation",
//                                         buttons: [
//                                             {
//                                                 type: "button",
//                                                 size: "xs",
//                                                 level: "info",
//                                                 label: "修改",
//                                                 actionType: "dialog",
//                                                 dialog: {
//                                                     title: "修改分组",
//                                                     body: {
//                                                         type: "form",
//                                                         api: 'put:/api/group/${id}',
//                                                         controls: [
//                                                             {
//                                                                 type: "text",
//                                                                 name: "name",
//                                                                 label: "分组名称",
//                                                                 required: true,
//                                                                 columnsCount: 4
//                                                             }
//                                                         ]
//                                                     }
//                                                 }
//                                             }
//                                         ]
//                                     },
//                                     {
//                                         breakpoint: true,
//                                         children: (props, path) => {
//                                             if (!props || !props.item)return null;
//                                             console.info(props);
//                                             const vol = props.item.volunteers;
//                                             return vol && vol.length > 0 ?  (
//                                                 <div className="table-responsive bg-white b-a m-t-md">
//                                                     <table className="table table-striped m-b-none">
//                                                         <thead>
//                                                         <tr>
//                                                             <th>姓名</th>
//                                                             <th>联系电话</th>
//                                                             <th>身份证号</th>
//                                                             <th>操作</th>
//                                                         </tr>
//                                                         </thead>
//                                                         <tbody>
//                                                         {vol.map((volunteer, index) => (
//                                                             <tr key={index}>
//                                                                 <td>{volunteer.real_name}</td>
//
//                                                                 <td>{volunteer.phone}</td>
//                                                                 <td>{volunteer.id_number}</td>
//                                                                 <td>
//                                                                     {
//                                                                         render(`${path}/button`, {
//                                                                             type: 'button',
//                                                                             label: '移除',
//                                                                             level: "danger",
//                                                                             size: 'sm',
//                                                                             actionType: "ajax",
//                                                                             confirmText: "确定要移除？",
//                                                                             api: "delete:/api/group/${vol.id}/${volunteer.user_id}"
//                                                                         }, props)
//                                                                     }
//                                                                 </td>
//                                                             </tr>
//                                                         ))}
//                                                         </tbody>
//                                                     </table>
//                                                 </div>
//                                             ) : (
//                                                 <div className="text-muted">
//                                                     该分组暂无志愿者
//                                                 </div>
//                                             )
//                                         }
//                                     }
//                                 ]
//                             }
//                         }, this.props)
//                     }
//                 </div>
//             // </div>
//         );
//     }
// }


 export const schema = {
    type: "page",
    title: "成员分组",
    // className: "b-l b-b b-r bg-white no-padder",
    body: {
        type: "crud",
        api: "/api/group",
        primaryField: 'id',
        className: "b-l b-b b-r bg-white no-padder",

        // columnsTogglable: false,
        panelClassName: "no-border no-shadow bg-white",
        footable: {
            expand: ""
        },
        toolbarInline: true,
        toolbar: {
            type: "button",
            label: "添加分组",
            level: "success",
            size: 'sm',
            actionType: "dialog",
            dialog: {
                title: "添加分组",
                body: {
                    type: "form",
                    api: 'post:/api/group',
                    controls: [
                        {
                            type: "text",
                            name: "name",
                            label: "分组名称",
                            required: true,
                            columnsCount: 4
                        }
                    ]
                }
            }
        },
        // bulkActions: [
        //     {
        //         type: "button",
        //         label: "删除分组",
        //         level: "danger",
        //         size: 'sm',
        //         actionType: "ajax",
        //         confirmText: "确定要删除？",
        //         api: "delete:/api/group/${ids}"
        //     }
        // ],
        columns: [
            {
                name: "id",
                label: "分组ID",
                innerClassName: "inline",
            },
            {
                name: "name",
                label: "分组名称",
            },
            {
                name: "group_user_count",
                label: "成员数",
                width: 50
            },
            {
                label: "操作",
                type: "operation",
                buttons: [
                    {
                        type: "button",
                        size: "xs",
                        level: "info",
                        label: "修改",
                        actionType: "dialog",
                        dialog: {
                            title: "修改分组",
                            body: {
                                type: "form",
                                api: 'put:/api/group/${id}',
                                controls: [
                                    {
                                        type: "text",
                                        name: "name",
                                        label: "分组名称",
                                        required: true,
                                        columnsCount: 4
                                    }
                                ]
                            }
                        }
                    },
                    {
                        type: "button",
                        label: "删除分组",
                        level: "danger",
                        size: "xs",
                        actionType: "ajax",
                        confirmText: "确定要删除？",
                        api: "delete:/api/group/${id}"
                    }
                ]
            },
            {
                breakpoint: true,
                children: (props, path) => {
                    if (!props || !props.item)return null;
                    console.info(props);
                    const vol = props.item.volunteers;
                    return vol && vol.length > 0 ?  (
                        <div className="table-responsive bg-white b-a m-t-md">
                            <table className="table table-striped m-b-none">
                                <thead>
                                <tr>
                                    <th>志愿者ID</th>
                                    <th>姓名</th>
                                    <th>用户名</th>
                                    <th>积分</th>
                                    <th>性别</th>
                                    <th>年龄</th>
                                    <th>联系电话</th>
                                    <th>居住区域</th>
                                    <th>参与项目数</th>
                                    <th>志愿时长</th>
                                    <th>注册时间</th>
                                    <th>操作</th>
                                </tr>
                                </thead>
                                <tbody>
                                {vol.map((volunteer, index) => {
                                    const api = `delete:/api/group/${volunteer.group_id}/${volunteer.user_id}`;
                                    const s = '${sd}';
                                    const t = render(`${path}/button`, {
                                        type: 'button',
                                        label: '移除',
                                        level: "danger",
                                        size: "xs",
                                        actionType: "ajax",
                                        confirmText: "确定要移除？",
                                        api: `${api}?sad=${s}`
                                    }, props);
                                    const sex = ['-', '男', '女'];
                                    const addr = volunteer.province_name ? `${volunteer.province_name} ${volunteer.city_name} ${volunteer.county_name} ${volunteer.addr}` : '-' ;
                                    return (
                                        <tr key={index}>
                                            <td>{volunteer.id}</td>
                                            <td><a data-link={`/volunteer/view/${volunteer.id}`}>{volunteer.real_name ? volunteer.real_name : '-'}</a></td>
                                            <td><a data-link={`/volunteer/view/${volunteer.id}`}>{volunteer.username ? volunteer.username : '-'}</a></td>
                                            <td>{volunteer.score ? volunteer.score : 0}</td>
                                            <td>{volunteer.sex ? sex[volunteer.sex] : '-'}</td>
                                            <td>{volunteer.age ? volunteer.age : '-'}</td>
                                            <td>{volunteer.phone ? volunteer.phone : '-'}</td>
                                            <td>{addr}</td>
                                            <td>{volunteer.project_count ? volunteer.project_count : 0}</td>
                                            <td>{volunteer.reward_time ? volunteer.reward_time : 0}</td>
                                            <td>{volunteer.created_at ? moment(volunteer.created_at).format('YYYY年MM月DD日') : '-'}</td>
                                            <td>
                                                {
                                                    t
                                                }
                                            </td>
                                        </tr>
                                    )
                                })}
                                </tbody>
                            </table>
                        </div>
                    ) : (
                        <div className="text-muted">
                            该分组暂无志愿者
                        </div>
                    )
                }
            }
        ]
    }
};
